@import './variables.scss';



.el-steps:not(.el-steps--vertical) {
    padding: 30px 0;
    background: #f3f6fb ;
    
    .el-step__title {
        font-size: 12px;
        color: $fontDark;
        line-height: 32px;
        
        &.is-success {
            
        }
        
        &.is-process {
            font-weight: bold;
            color: $mainBlue;
        }
        
        &.is-wait {
            font-weight: bold;
            color: #99accd ;
        }
    }
    
    
    .el-step__head {
        position: relative;
        &:before {
            display: block;
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 40px;
            height: 40px;
            background: #dbe3f6;
            border-radius: 50%;
            z-index: 1;
        }
        
        .el-step__line {
            z-index: 5;
            top: 50%;
            margin: 0;
            transform: translate(0,-50%);
            height: 10px;
            background: #dbe3f6;
        }
        
        .el-step__icon {
            position: relative;
            width: 32px;
            height: 32px;
            background: #99accd;
            border: 0;
            z-index: 10;
            
            .el-step__icon-inner {
                color: #fff;
            }
        }
        
        &.is-success,&.is-finish{
            
            .el-step__line {
                i {
                    border: 0 !important;
                    position: relative;
                    z-index: 5;
                    margin-top: 3px;
                    width: 100% !important;
                    height: 4px;
                    background: $mainBlue;
                }
            }
        }
        
        &.is-success,&.is-process,&.is-finish {
            .el-step__icon {
                background:$mainBlue ;
            }
        }
        
        &.is-wait {
            .el-step__line {
                
            }
        }
    }
    
}


